<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>   
    <script src="js/jquery.min.js"></script>   
    <script src="js/star-rating.js" type="text/javascript"></script>
	<link type="text/css" rel="stylesheet" href="css/index_new_page.css">
	<script type="text/javascript" src="js/startScore.js"></script>
</head>
<style>
	body {
		font-size: 12px;
		font-family: Arial;
		margin: 0px;
		padding: 0px;
	}
	
	a {
		color: #999;
	}
	
	.greenColor {
		color: darkgreen !important;
	}
	
	nav.top a:hover {
		color: darkgreen;
		text-decoration: none;
	}
	
	nav.top {
		background-color: ghostwhite;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #e7e7e7;
		margin: 0px;
	}
	
	nav.top span,
	nav.top a {
		color: #999;
		margin: 0px 0px 0px 10px;
		text-decoration: none;
	}
	
	.pull-right {
		float: right;
	}
	
	div.searchDiv {
		background-color: cadetblue;
		width: 400px;
		margin: 0px auto;
		padding: 1px;
		height: 40px;
		display: block;
	}
	
	div.searchDiv input {
		width: 275px;
		border: 1px solid transparent;
		height: 36px;
		margin: 1px;
		outline: none;
	}
	
	div.searchDiv button {
		width: 110px;
		border: 1px solid transparent;
		background-color: cadetblue;
		color: white;
		font-size: 20px;
		font-weight: bold;
	}
	
	div.searchBelow {
		margin-top: 3px;
		margin-left: -20px;
	}
	
	div.searchBelow span {
		color: #999;
	}
	
	div.searchBelow a {
		padding: 0px 20px 0px 20px;
		font-size: 14px;
		text-decoration: none;
	}
	
	img.logo {
		position: absolute;
		left: 0px;
		top: 30px;
		z-index: -1;
	}
	
	body {
		font-size: 12px;
		font-family: Arial;
	}
	
	a {
		color: #999;
	}
	
	a:hover {
		text-decoration: none;
		color: cadetblue;
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.centerblock {
		top: 100px;
		margin: auto;
		margin-top: 50px;
		width: 935px;
		height: 300px;
		border: 1px solid silver;
	}
	
	.centerblock2 {
		top: 100px;
		margin: auto;
		margin-top: 50px;
		width: 935px;
		height: 10px;
	}
	
	.centerblock_left {
		width: 199px;
		height: 300px;
		border-right: 1px solid cadetblue;
		float: left;
	}
	
	#centerblock_right {
		float: left;
		width: 735px;
		height: 300px;
		overflow: hidden;
		position: relative;
	}
	
	#list {
		width: 4200px;
		height: 300px;
		position: absolute;
		z-index: 1;
	}
	
	#list img {
		width: auto;
		height: 100%;
	}
	
	.listmenu {
		/*border: 1px solid silver;*/
		/*left: 20px;*/
	}
	
	.listmenu li {
		list-style: none;
		padding-left: 20px;
		height: 31.2px;
		line-height: 31.2px;
		font-size: 15px;
	}
	
	.listmenu li span {
		float: right;
		margin-right: 10px;
	}
	
	.listmenu li>a {
		text-decoration: none;
		color: #3a3a3a;
	}
	
	.listmenu li:hover {
		background-color: whitesmoke;
		color: cadetblue;
	}
	
	.listmenu li:hover>a {
		color: cadetblue;
	}
	
	.listmenu>li>a:hover {
		text-decoration: underline;
	}
	
	.listmenu_child1 {
		position: absolute;
		left: 220px;
		top: 0px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child2 {
		position: absolute;
		left: 220px;
		top: 30px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child3 {
		position: absolute;
		left: 220px;
		top: 60px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child4 {
		position: absolute;
		left: 220px;
		top: 90px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child5 {
		position: absolute;
		left: 220px;
		top: 120px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child6 {
		position: absolute;
		left: 220px;
		top: 150px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu_child7 {
		position: absolute;
		left: 220px;
		top: 180px;
		background-color: white;
		border: 2px solid cadetblue;
		width: 500px;
		height: 200px;
		display: none;
		z-index: 9999;
	}
	
	.listmenu>li:hover .listmenu_child1 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child2 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child3 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child4 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child5 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child6 {
		display: block;
	}
	
	.listmenu>li:hover .listmenu_child7 {
		display: block;
	}
	
	.listmenu_child_left {
		position: relative;
		float: left;
		padding-left: 20px;
		width: 530px;
		height: 300px;
	}
	
	.listmenu_child_right {
		position: relative;
		float: left;
		width: 249px;
		height: 300px;
		border-left: 1px solid silver;
	}
	
	.listmenu_child_left_top_title {
		position: relative;
		width: 530px;
		height: 35px;
		line-height: 35px;
		margin-top: 5px;
		color: black;
	}
	
	.span1 {
		position: absolute;
		bottom: 0;
		float: left;
		font-size: 18px;
		left: 0px;
		color: black;
	}
	
	.span2 {
		position: absolute;
		bottom: 0;
		float: right;
		font-size: 13px;
		right: 8px;
		color: black;
	}
	
	.listmenu_child_left_a {
		margin-right: 25px;
		line-height: 25px;
	}
	
	.listmenu_child_left_a>a {
		text-decoration: none;
		font-size: 14px;
		margin-right: 20px;
	}
	
	.colororg {
		color: cadetblue;
	}
	
	.colorgray {
		color: gray;
	}
	
	.listmenu_child_right_title {
		position: relative;
		text-align: center;
		font-size: 14px;
		color: black;
		top: 10px;
	}
	
	#buttons {
		position: absolute;
		height: 10px;
		width: 100px;
		z-index: 2;
		/*将buttons放在list上层*/
		bottom: 20px;
		right: 250px;
	}
	
	#buttons span {
		cursor: pointer;
		float: left;
		border: 1px solid #fff;
		border-radius: 50%;
		height: 10px;
		width: 10px;
		margin-right: 5px;
		background: #E98352;
	}
	
	#buttons .on {
		background: #474550;
	}
	
	.arrow {
		display: none;
		cursor: pointer;
		line-height: 40px;
		text-align: center;
		font-size: 30px;
		/*设置箭头的大小*/
		width: 40px;
		height: 40px;
		position: absolute;
		z-index: 2;
		/*将arrow放在list上层*/
		top: 180px;
		color: #fff;
		background: #474550;
	}
	
	.arrow:hover {
		background-color: #E98352;
		text-decoration: none;
	}
	
	#centerblock_right:hover .arrow {
		display: block;
		text-decoration: none;
	}
	
	#pre {
		left: 20px;
	}
	
	#next {
		right: 20px;
	}
	
	.oneSpan {
		padding: 10px 0;
	}
	
	.author {
		padding: 0 20px;
		height: 24px;
		line-height: 24px;
		overflow: hidden;
		color: #aaa;
	}
	
	.price {
		padding-left: 20px;
		height: 36px;
		line-height: 16px;
		font-family: "Arial";
		font-size: 14px;
		position: relative;
	}
	
	.rob {
		color: #c30;
		float: left;
		overflow: hidden;
		margin-right: 12px;
		font-weight: bold;
	}
	
	.name {
		height: 44px;
		line-height: 22px;
		position: absolute;
		overflow: hidden;
		top: 9px;
		left: 145px;
	}
	
	.product_ul {
		width: 800px;
		padding-top: 25px;
	}
	
	.div-inline {
		display: inline;
		width: 180px;
		height: 300px;
	}
	
	div.imgAndInfo {
		margin: 40px 20px;
		margin-bottom:0px;
	}
	
	div.imgInimgAndInfo {
		width: 400px;
		float: left;
	}
	
	div.imgAndInfo img.bigImg {
		width: 400px;
		height: 400px;
		padding: 20px;
		border: 1px solid #F2F2F2;
	}
	
	div.imgAndInfo div.smallImageDiv {
		width: 80%;
		margin: 20px auto;
	}
	
	div.imgAndInfo img.smallImage {
		width: 60px;
		height: 60px;
		border: 2px solid white;
	}
	
	div.imgAndInfo img.smallImage:hover {
		border: 2px solid black;
	}
	
	div.infoInimgAndInfo {
		width:500px;
		height:318px;
		padding: 0px 61px;
		overflow: hidden;
	}
	
	div.infoInimgAndInfo div.productTitle {
		color: black;
		font-size: 16px;
		font-weight: bold;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle {
		color: gray;
		font-size: 16px;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle2 {
		color: cadetblue;
		font-size: 12px;
		margin: 10px 10px;
	}
	
	div.infoInimgAndInfo div.juhuasuan {
		background-color: #2DA77A;
		color: white;
		text-align: center;
		line-height: 40px;
		margin-top: 10px;
	}
	
	div.infoInimgAndInfo span.juhuasuanBig {
		font-size: 18px;
		font-weight: bold;
		font-family: 黑体;
	}
	
	div.infoInimgAndInfo span.juhuasuanTime {
		color: #FFC057;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo div.productPriceDiv {

		height: 50px;
		padding: 10px;
		color: #666666;
	}
	
	div.infoInimgAndInfo div.gouwujuanDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo div.originalDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo span.originalPriceDesc {
		font-size: 20px;
		color: cadetblue;
		display: inline-block;
		width: 68px;
	}
	
	div.infoInimgAndInfo span.originalPrice {
		font-family: Arial;
		font-size: 14px;
		color: #333333;
	}
	
	div.infoInimgAndInfo span.promotionPriceYuan {
		font-family: Arial;
		font-size: 18px;
		color: #C40000;
	}
	
	div.infoInimgAndInfo span.promotionPrice {
		color: #c40000;
		font-family: Arial;
		font-size: 30px;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo span.promotionPriceDesc {
		color: #999999;
		display: inline-block;
		width: 68px;
		position: relative;
		left: 0px;
		top: -10px;
	}
	
	div.infoInimgAndInfo div.productNumber {
		color: #999999;
		padding-left:10px;
	}
	
	div.infoInimgAndInfo span.productNumberSettingSpan {
		border: 1px solid #999;
		display: inline-block;
		width: 43px;
		height: 32px;
		padding-top: 7px;
	}
	
	div.infoInimgAndInfo input.productNumberSetting {
		border: 0px;
		height: 80%;
		width: 80%;
	}
	
	div.productNumber span.num_add {
		background-position: -37px 0;
		top: 0;
	}
	
	div.productNumber span.updown {
		border: 1px solid #999;
		display: block;
		width: 20px;
		height: 14px;
		text-align: center;
		padding-top: 4px;
	}
	
	div.productNumber span.updownMiddle {
		height: 4px;
		display: block;
	}
	
	div.productNumber span.arrow {
		display: inline-block;
		width: 22px;
		height: 32px;
		vertical-align: top;
	}
	
	div.buyDiv {
		margin: 20px auto;
	
	}
	
	div.buyDiv button {
		display: inline-block;
		margin: 0px 10px;
		width: 180px;
		height: 40px;
	}
	
	button.buyButton {
		border: 1px solid whitesmoke;
		background-color: whitesmoke;

		line-height: 40px;
		font-size: 16px;
		color: cadetblue;
		font-family: arial;
	}
	
	button.addCartButton {
		border: 1px solid cadetblue;
		background-color: cadetblue;
	
		line-height: 40px;
		font-size: 16px;
		color: white;
		font-family: arial;
	}
	
	button.addCartButton span.glyphicon {
		font-size: 12px;
		margin-right: 8px;
	}
	
	a:hover {
		cursor:hand;
		text-decoration: none;
	}
	button:hover {
		cursor:hand;
	}
	.redColor {
		color: #C40000;
	}
	
	.boldWord {
		font-weight: bold;
	}
	
	div .messbox_info {
		display: inline-block;
		padding-right: 25px
	}
	
	div .messbox_info .title {
		display: inline-block
	}
	
	.product_main .sale_box .messbox_info .pinglun {
		clear: both
	}
	
	.product_main .sale_box .messbox_info .pinglun .t1 {
		float: left
	}
	/*星星样式*/
.content{ width:600px; margin:0 auto; padding-top:20px;}
.title{ font-size:14px; background:#dfdfdf; padding:10px; margin-bottom:10px;}
.block{ width:100%; margin:0 0 20px 0; padding-left:50px; line-height:21px;}
.block .star_score{ float:left;}
.star_list{height:21px;margin:50px; line-height:21px;}
.block p,.block .attitude{ padding-left:20px; line-height:21px; display:inline-block;}
.block p span{ color:#C00; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
.star_score { background:url(images/stark2.png); width:160px; height:21px;  position:relative; }
.star_score a{ height:21px; display:block; text-indent:-999em; position:absolute;left:0;}
.star_score a:hover{ background:url(images/stars2.png);left:0;}
.star_score a.clibg{ background:url(images/stars2.png);left:0;}
#starttwo .star_score { background:url(images/starky.png);}
#starttwo .star_score a:hover{ background:url(images/starsy.png);left:0;}
#starttwo .star_score a.clibg{ background:url(images/starsy.png);left:0;}
/*星星样式*/
.show_number{ padding-left:50px; padding-top:20px;}
.show_number li{ width:240px; border:1px solid #ccc; padding:10px; margin-right:5px; margin-bottom:20px;}
.atar_Show{background:url(images/stark2.png); width:160px; height:21px;  position:relative; float:left; }
.atar_Show p{ background:url(images/stars2.png);left:0; height:21px; width:134px;}
.show_number li span{ display:inline-block; line-height:21px;}
.bt {
	width:100px;
    border: 1px solid cadetblue;
	background-color: cadetblue;
	line-height: 30px;
	font-size: 8px;
	color: white;
	font-family: arial;
	margin-right:200px;
}
</style>
<% String bookId=request.getParameter("id"); %>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
window.onload=function tryapitest(){
	$.ajax({
        url:"<%=request.getContextPath()%>/bookrecommend",
        type:"GET",
        dataType:"json",
        success: function(data) {
            var item=data;
            var html = '<div class="content_right"><div class="index_righttab_module padding_top_20" dd_name="畅销榜"><div><div class="index_subtitle_module "><ul class="nav clearfix"><li class="first on only_one"><a target="_blank" href="">畅销榜</a></li></ul></div></div><div class="new_rank_list red_border"><div class="publish_seller_list"><ul class="list_title"><li class="left_side selected">日榜</li></ul><div id="test" class="list_content " style="display: block;">';
            for(var i=0;i<10;i++){
            	if(i<=2)html+='<div class="nopic red_bg" onmouseover="over(this)" onmouseleave="leave(this)">';
            	else html+='<div class="nopic" onmouseover="over2(this)" onmouseleave="leave2(this)">';
            	if(i!=9)html+='<div class="mark">0'+(i+1)+'</div>';
            	else html+='<div class="mark">10</div>';
            	html+='<div class="book_content clearfix"><div class="cover">';
            	html+='<a href="<%=request.getContextPath() %>/index/bookdetail.jsp?id='+item[i].book_id+'" title="'+item[i].title+'">';
            	html+='<img src="'+item[i].url+'"  ></a></div><div class="info"><h3>';
            	html+='<a href="<%=request.getContextPath() %>/index/bookdetail.jsp?id="'+item[i].book_id+'" title="'+item[i].title+'">'+item[i].title+'</a>';
            	html+='<span class="price_out">￥'+item[i].book_price+'</span></h3>';
            	html+='<span class="grey"><a href="<%=request.getContextPath() %>/index/bookdetail.jsp?id='+item[i].book_id+'" title="'+item[i].title+'">'+item[i].author+'</a></span>';
                html +='<div class="price_inuse"><span class="orange">￥'+item[i].book_price+'</span></div></div></div></div>';
            }
            html+='<div class="more_list"><a target="_blank" href="">更多畅销榜 &gt;</a></div></div></div></div></div></div>'
            $(".index_class_focus").append(html);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        },
    })
    $.ajax({
        url:"<%=request.getContextPath()%>/bookdetails?bookId=<%=bookId%>",
        type:"GET",
        dataType:"json",
        success: function(data) {
            var arr=data;
            var html='<div class="imgInimgAndInfo"><img width="100px" class="bigImg" src="'+arr[0].url+'"/></div><div class="infoInimgAndInfo" >';
		      html += '<div class="productTitle">'+arr[0].title+'</div>';
		      if(arr[0].description!="null"){
		    	  html += '<div class="productSubTitle">'+arr[0].description+'</div>';
		      }
		      if(arr[0].author=="null")arr[0].author="";
		      html += '<div class="productSubTitle2">'+'<span>作者:<a>'+arr[0].author+'</a></span>&nbsp;出版社:<a>'+arr[0].publisher+'</a>&nbsp;出版时间:<a>'+arr[0].publishing_time+'年</a></div>';
		      html += '<div class="productPrice"><div class="productPriceDiv"><div class="originalDiv"><span class="originalPriceDesc">价格</span><span class="originalPriceYuan">¥</span><span class="originalPrice">'+arr[0].book_price+'</span></div></div></div>';
		      html += '<div class="productPrice"><div class="productPriceDiv"><div class="originalDiv"><span class="originalPriceDesc">评分：</span><span class="originalPrice">'+arr[0].score+'</span></div></div></div>';
		      html += '<form name="choice" action="<%=request.getContextPath()%>/showcart" method="post"><input type="hidden" value=<%=bookId%> name="BookId" ><div class="productNumber"><span>数量</span><span><span class="productNumberSettingSpan"><input type="text" value="1" class="productNumberSetting" name="Add"></span>件</span><span>库存'+arr[0].inventory+'件</span></div>';
		      
		      html += '<div class="buyDiv"><a class="addCartLink" ><button type="submit" class="addCartButton" value="加入购物车"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a></div></form>';     				 
		      document.getElementById("c").innerHTML=html;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        },
    })
}
</script>

<script type="text/javascript">
    function searchfunc(key){
    	var keyword=$("#keyword").val();
    	if(keyword.length==0){
    		keyword=key;
    	}
    	window.location.href='<%=request.getContextPath()%>/index/search.jsp?keyword='+keyword; 
    }
</script>
<script>
	function over(x) {
		x.className="nopic red_bg current";
	}
	function leave(x) {
		x.className="nopic red_bg";
	}
	function over2(x) {
		x.className="nopic current";
	}
	function leave2(x) {
		x.className="nopic";
	}
</script>

<body>
	<nav class="top">
			<a href="index.jsp" onclick=back()>首页</a>
			<span>欢迎来到鹿马书城~</span>
			<%
			if(request.getSession().getAttribute("identity")!=null){
				int identity=(int)request.getSession().getAttribute("identity");
				if(identity==1){
					%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
		            <a href="<%=request.getContextPath() %>/ShowOrder">查看订单</a>
					</span><%
				}
				else{%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
					<a href="<%=request.getContextPath()%>/index/ratinglist.jsp">我的评分</a>
		            <a href="<%=request.getContextPath() %>/index/orderlist.jsp">我的订单</a>
		            <a href="<%=request.getContextPath() %>/showcart">购物车</a>
					</span><%
				}
			}
			else{
			%>
				<a href="<%=request.getContextPath()%>/enter">请登录</a>
				<a href="<%=request.getContextPath()%>/register">免费注册</a><%
			}
			%>
		</nav>
	<div class="searchDiv">
		<input type="text" placeholder="python 机器学习" name="keyword">
		<button id="btn" type="submit" onclick="searchfunc()">搜索</button>
		<div class="searchBelow">
			<a>热搜:</a>
			<span> <a href="javascript:;" onclick=searchfunc("Timeline")> Timeline </a> 
				</span> <span> <a href="javascript:;" onclick=searchfunc("Airframe")> Airframe </a> 
				</span> <span> <a href="javascript:;" onclick=searchfunc("Downtown")>Downtown</a> </span>
            </div>
       </div>
    <div class="index_class_focus" style="position:absolute;top: 9px;right:100px; "></div>
    <div class="imgAndInfo">
    	<div id="c"  ></div>
    <div class="content">
    <div id="startone"  class="block clearfix" style="padding-left:100px;padding-bottom::100px;">
          <div class="star_score"></div>
          <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
          <form action="<%=request.getContextPath()%>/addrating">
    			<input name="score" value="4" type="hidden" class="rate" >
    			<input name="bookid" value=<%=bookId %> type="hidden" >
    			<br>
				<div class="buyDiv" style="margin-right:100px;"><a class="addCartLink" style="margin-right:120px;margin-top:100px;">
    			<button type="submit" class="addCartButton" >Submit</button></a></div>
		  </form>
    </div>

    <script>
     scoreFun($("#startone"))

    </script>

  </div>
	</div>
	
</body>